import React, { useState } from 'react';
import { Outlet } from 'react-router-dom';
import { Layout, theme, ConfigProvider, App } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import Header from './components/Header';
import SideMenu from './components/SideMenu';
const { Sider, Content } = Layout;

//全局消息提示配置
// message.config({
//   duration: 2,
//   maxCount: 1
// });

const MyApp: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const { colorBgContainer, borderRadiusLG } = theme.useToken().token;

  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        token: {
          colorPrimary: '#a062d4', // 浅紫
          borderRadius: 12,
        },
        components: {
          Button: {
            colorPrimary: '#7438a5'  // 深紫
          },
        },
      }}
    >
      <App message={{ maxCount: 1 }}>
        <Layout className='app-container'>
          <Sider width={300} trigger={null} collapsible collapsed={collapsed}>
            <SideMenu collapsed={collapsed} />
          </Sider>
          <Layout>
            <Header collapsed={collapsed} setCollapsed={setCollapsed} />
            <Content className='main-container' style={{ background: colorBgContainer, borderRadius: borderRadiusLG }}>
                <Outlet />
            </Content>
          </Layout>
        </Layout>
      </App>
    </ConfigProvider>
  );
};

export default MyApp;
